<template>
	<div class="swiper-container">
		<div class="swiper-wrapper">
			<div class="swiper-slide" v-for="item in imgs">
				<img :src="item.url" />
			</div>
		</div>
		<!-- Add Pagination -->
		<div class="swiper-pagination"></div>
	</div>

</template>
<script>
	export default {
		name: "swiper",
		data() {
			return {}
		},
		mounted() {
			this.myswiper();
		},
		methods: {
			myswiper() {
				var swiper = new Swiper('.swiper-container', {
					loop: true,
					slidesPerView: 'auto',
					autoplay: true,
					spaceBetween: 10,
					pagination: {
						el: '.swiper-pagination',
						clickable: true,
					},
				});
			}
		},
		props: ["imgs"]
	}
</script>

<style scoped="scoped">
	html,
	body {
		position: relative;
		height: 100%;
	}
	
	body {
		background: #eee;
		font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
		font-size: 14px;
		color: #000;
		margin: 0;
		padding: 0;
	}
	
	.swiper-container {
		width: 100%;
		height: 100%;
	}
	.swiper-container>img{
		width: 100%;
		height: 100%;
	}
	.swiper-slide {
		text-align: center;
		font-size: 18px;
		background: #fff;
		/* Center slide text vertically */
		display: -webkit-box;
		display: -ms-flexbox;
		display: -webkit-flex;
		display: flex;
		-webkit-box-pack: center;
		-ms-flex-pack: center;
		-webkit-justify-content: center;
		justify-content: center;
		-webkit-box-align: center;
		-ms-flex-align: center;
		-webkit-align-items: center;
		align-items: center;
		width: 89%;
		height: 3.5rem;
	}
	img {
		border-radius: 0.1rem;
		width: 100%;
		height: 100%;
	}
</style>